<template>
  <div class="app-container">
    <!-- 策略开关 -->
    <el-form ref="statusForm" label-width="120px" v-loading="statusLoading">
      <el-form-item label="策略状态">
        <el-switch v-model="strategyStatus" @change="updateStrategyStatus"></el-switch>
        <span>当前策略状态: <b v-if="strategyStatus" style="color:#03d203;">开启</b><b v-else style="color:#f00;">关闭</b></span>，或者直接选择
        <el-button size="small" type="text" @click="onRestartStrategy" :loading="restartStatus">重启</el-button>
      </el-form-item>
    </el-form>

    <!-- 对应交易所信息 -->
    <div class="cqt-box-item">
        <h3>对应交易所<el-button type="text" v-if="exchangeShow" @click="exchangeShow = false">隐藏</el-button><el-button type="text" v-else @click="exchangeShow = true">显示</el-button></h3>
        <el-table
            :data="exchangeData"
            border
            stripe
            v-show="exchangeShow"
            style="width:100%">
            <el-table-column
                prop="id"
                label="交易所ID"
                align="center"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="交易所名"
                align="center"
                width="180">
            </el-table-column>
            <el-table-column
                align="center"
                label="交易对">
                <template scope="scope">
                    <el-tag size="mini" v-for="item in scope.row.symbol">{{ item }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleEditExchange(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <!-- 对应策略信息 -->
    <div class="cqt-box-item">
        <h3>策略信息<el-button type="text" v-if="strategyShow" @click="strategyShow = false">隐藏</el-button><el-button type="text" v-else @click="strategyShow = true">显示</el-button></h3>
        <el-table
            :data="strategyInfo"
            border
            stripe
            v-show="strategyShow"
            style="width:100%">
            <el-table-column
                prop="id"
                label="策略ID"
                align="center"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="策略名"
                align="center"
                width="180">
            </el-table-column>
            <el-table-column
                prop="jarPackageName"
                align="center"
                label="jar包名">
            </el-table-column>
            <el-table-column
                label="操作"
                align="center">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleEditExchange(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <!-- 对应策略配置信息 -->
    <div class="cqt-box-item">
        <h3>策略配置<el-button type="text" v-if="strategyConfigShow" @click="strategyConfigShow = false">隐藏</el-button><el-button type="text" v-else @click="strategyConfigShow = true">显示</el-button></h3>
        <el-table
            :data="strategyConf"
            border
            stripe
            v-show="strategyConfigShow"
            style="width:100%">
            <el-table-column
                prop="name"
                label="配置名"
                align="center">
            </el-table-column>
            <el-table-column
                prop="value"
                label="配置参数"
                align="center">
            </el-table-column>
            <el-table-column
                prop="type"
                label="数据类型"
                align="center">
            </el-table-column>
            <el-table-column
                prop="default"
                label="默认值"
                align="center">
            </el-table-column>
            <el-table-column
                prop="explain"
                align="center"
                label="配置说明">
            </el-table-column>
            <el-table-column
                label="操作"
                align="center">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleEditExchange(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <!-- 日志 -->
    <div class="cqt-box-item">
        <h3>策略日志</h3>
        <p class="cqt-caption">说明介绍类文字说明介绍类文字说明介绍类文字说明介绍类文字说明介绍类文字说明介绍类文字</p>
        <el-table
            :data="logData"
            style="width:100%;margin-bottom:0;">
            <el-table-column
                label="日期"
                width="180">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left:10px">{{ scope.row.date }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="类型"
                align="center"
                width="100">
                <template slot-scope="scope">
                    <el-tag size="medium" type="success" v-if="scope.row.type == 'debug'">{{ scope.row.type }}</el-tag>
                    <el-tag size="medium" v-else-if="scope.row.type == 'info'">{{ scope.row.type }}</el-tag>
                    <el-tag size="medium" type="warning" v-else-if="scope.row.type == 'warn'">{{ scope.row.type }}</el-tag>
                    <el-tag size="medium" type="danger" v-else-if="scope.row.type == 'error'">{{ scope.row.type }}</el-tag>
                    <el-tag size="medium" type="info" v-else>{{ scope.row.type }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="value"
                label="信息详情">
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="logTotal">
        </el-pagination>
    </div>
  </div>
</template>

<script>
import { getInfo, restartStrategy, updateStrategyStatus, getLog } from '@/api/strategy'

export default {
  data() {
    return {
        strategyId: 1,
        strategyStatus: null,
        restartStatus: false,
        statusLoading: false,
        strategyInfo: {
            name: null,
        },
        exchangeShow: true,
        exchangeData: [],
        strategyShow: true,
        strategyInfo: [],
        strategyConfigShow: true,
        strategyConf: [],
        logData: [],
        currentPage: 1,
        pageSize: 100,
        logTotal: 400
    }
  },
  created() {
    this.init();
  },
  methods: {
    init(){
        // 初始化请求
        this.loadExchangeData();
        this.loadStrategyData();
        this.loadLogData();
    },
    loadExchangeData() {
        this.exchangeData = [
            {id: 1, name: '交易所一', symbol: 'btc_usd,ltc_usd,eth_usd'.split(',')},
            {id: 2, name: '交易所二', symbol: 'btc_usd,bcc_usd'.split(',')}
        ];
        /* getInfo(this.strategyId).then(response => {
            var data = response.data;
            this.exchangeData = data.exchangeData;
        }) */
    },
    loadStrategyData() {
        // 
    },
    loadLogData() {
        this.logData = [
            {date: '2018-06-20 10:30:31', type:'info', value:'测试数据.........'},
            {date: '2018-06-20 10:30:31', type:'debug', value:'测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据'},
            {date: '2018-06-20 10:30:31', type:'warn', value:'测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据'},
            {date: '2018-06-20 10:30:31', type:'error', value:'测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据'},
            {date: '2018-06-20 10:30:31', type:'debug', value:'测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据'},
        ];
        console.log('测试获取日志', {page:this.currentPage, pageSize:this.pageSize});
        /* getLog({page:this.currentPage, pageSize:this.pageSize}).then(response => {
            this.logData = response.data;
        }) */
    },
    onRestartStrategy() {
        if(this.restartStatus) return;

        this.restartStatus = true;
        restartStrategy(this.strategyId).then(response => {
            this.$message('操作成功!')
            this.restartStatus = false;
        })
    },
    updateStrategyStatus() {
        if(this.statusLoading) return;

        this.statusLoading = true;
        updateStrategyStatus(this.strategyId).then(response => {
            this.$message('操作成功!')
            this.statusLoading = false;
        })
    },
    handleEditExchange(index, row) {
        console.log(index, row);
    },
    handleDelete(index, row) {
        console.log(index, row);
    },
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.loadLogData();
    },
    handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.loadLogData();
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
.cqt-box-item h3>button{margin-left:20px;}
.cell .el-tag{margin-left:2px;margin-right: 2px;}
.el-pagination{margin-top:20px;}
.el-table{margin-bottom:60px;}
.cqt-caption{font-size:14px;color:#ccc;padding:10px 20px;background-color:#f7f7f7;border-radius:4px;margin:0;}
</style>
